<template>
  <div class="goods_cate">
    <category-List style="padding-bottom: 10px; border-bottom: 1px solid #eeeeee;"></category-List>
    <!-- <div class="shop_street_banner">
      <div class="categoryList" v-if="storeCategoryList.length > 0">
        <div class="swiper-wrapper">
          <div
            v-for="(item, index) in storeCategoryList"
            :key="index"
            :class="{ on: slideOn === index }"
            @click="activeClick(item, index)"
            class="swiper-slide"
          >
            <span v-if="$i18n.locale == 'en'">{{ item.category_name_en }}</span>
            <span v-else-if="$i18n.locale == 'zh-Hans'">{{
              item.category_name
            }}</span>
			<span v-else-if="$i18n.locale == 'zh-Hant'">{{
			item.category_name_tw
			}}</span>
			<span v-else-if="$i18n.locale == 'ja'">{{
			item.category_name_ja
			}}</span>

            <span v-else-if="$i18n.locale == 'th'">{{
              item.category_name_th
            }}</span>
						<span v-else-if="$i18n.locale == 'vi'">{{
						  item.category_name_vi
						}}</span>
						<span v-else-if="$i18n.locale == 'vi'">{{
						  item.category_name_vi
						}}</span>
						<span v-else-if="$i18n.locale == 'id'">{{
						  item.category_name_id
						}}</span>
						<span v-else-if="$i18n.locale == 'hi'">{{
						  item.category_name_hi
						}}</span>
						<span v-else-if="$i18n.locale == 'tr'">{{
						  item.category_name_tr
						}}</span>
						<span v-else-if="$i18n.locale == 'ar'">{{
						  item.category_name_ar
						}}</span>
						<span v-else-if="$i18n.locale == 'ko'">{{
						  item.category_name_ko
						}}</span>
            <span v-else>{{ item.category_name_en }}</span>
          </div>
        </div>
      </div>
    </div> -->
    <div class="newGoods wrapper_1200" style="margin-top: 20px;"  id="page3">
      <div class="publicTitle acea-row row-between-wrapper">
        <!-- <div class="title acea-row row-middle">
          <div class="pictrue" style="width: 1000px;">
          <h1 style="
             font-size: 16px;
             font-weight: 700;
             color: #4d4d4d;
             letter-spacing: 1px;
             line-height: 30px;
             font-weight: 700;
           ">{{$t("page.index.PopularStores")}}</h1>
          </div>
        </div> -->
      </div>
      <div class="list row-middle" style="">
        <div class="" style="display: flex; flex-wrap: wrap;">
           <div
             class=""
             v-for="(item, index) in storelist"
             :key="index"
             @click="goDetails(item)"
             style="
               width: 340px;
               border: 1px solid #eeeeee;
               border-radius: 5px;
               padding: 10px;
               margin-right: 50px;
               margin-top: 20px;
             "
           >
             <div style="display: flex">
               <div>
                 <img
                   :src="
                     item.recommend && item.recommend.length
                       ? item.recommend[0].image
                       : item.mer_avatar
                   "
                   alt=""
                   style="width: 70px; height: 70px; border-radius: 50%"
                 />
               </div>
               <div style="margin-left: 15px">
                 <div style="width: 100px;text-overflow: ellipsis; white-space: nowrap;">
                    <p>{{ item.mer_name }}</p>
                 </div>
                 <p style="color: #a0a0a0; font-size: 13px; margin-top: 5px">
                  {{$t("page.index.Product") +  item.product_score}}
                 </p>
                 <p style="color: #a0a0a0; font-size: 13px; margin-top: 5px">
                   {{$t("page.index.TotalSales")}}0
                 </p>
                 <p style="color: #a0a0a0; font-size: 13px; margin-top: 5px">
                   {{$t("page.index.goodreviews") +  item.service_score}}
                 </p>
               </div>
               <div
                 style="
                   border: 1px solid #f89900;
                   backgroound-color: #fcf2e2;
                   width: 130px;
                   height: 26px;
                   line-height: 25px;
                   text-align: center;
                   border-radius: 13px;
                   margin-left: 20px;
                   margin-top: 50px;
                   "
               >
                 <span style="color: #f89900; font-size: 13px"
                   >{{$t("page.index.VisitStore") +  ">" }}</span
                 >
               </div>
             </div>
           </div>


        </div>
      </div>
      <el-pagination
        v-if="total > 0"
        background
        layout="prev, pager, next"
        :total="total"
        :pageSize="limit"
        @current-change="bindPageCur"
        style="margin-top: 50px;"
      ></el-pagination>
    </div>


    <!-- <div class="store-wrapper">
      <div class="wrapper_1200">
        <div class="store acea-row row-middle" v-if="storelist.length">
          <div
            class="item acea-row row-middle"
            v-for="(item, index) in storelist"
            :key="index"
          >
            <div class="store_main" :class="'street-bg' + (index % 6)">
              <div class="store_logo">
                <img :src="item.mer_avatar" alt="" />
              </div>
              <div class="store_name line1">
                <span v-if="item.is_trader" class="trader">{{
                  $t("page.store.selfSupport")
                }}</span>
                {{ item.mer_name }}
              </div>
              <div class="follow">
                {{
                  item.care_count < 10000
                    ? item.care_count
                    : (item.care_count / 10000).toFixed(1) + $t('page.index.tenthousand')
                }}{{ $t("page.store.people") }}
              </div>
              <nuxt-link
                :to="{ path: '/store', query: { id: item.mer_id } }"
                class="goStore"
                >{{ $t("page.goodsDetail.goshopping") }}</nuxt-link
              >
            </div>
            <div
              v-if="item.recommend.length > 0"
              class="store_product acea-row row-middle"
            >
              <div
                class="proList"
                v-for="(itemn, indexn) in item.recommend"
                :key="indexn"
                @click="goDetail(itemn)"
              >
                <span class="image">
                  <img :src="itemn.image" alt="" />
                </span>
                <div class="name line1">{{ itemn.store_name }}</div>
                <div class="price"><span>$</span>{{ itemn.price }}</div>
              </div>
            </div>

            <div v-else class="store_product acea-row row-middle">
              <div class="no-recommend">
                <div class="pictrue">
                  <img src="../assets/images/noGoods.png" />
                </div>
                <div class="name">{{ $t("page.goodsList.empty") }}</div>
              </div>
            </div>
          </div>
        </div>
        <el-pagination
          v-if="total > 0"
          background
          layout="prev, pager, next"
          :total="total"
          :pageSize="limit"
          @current-change="bindPageCur"
        ></el-pagination>
      </div>
    </div> -->
    <div class="noGoods" v-if="!storelist.length">
      <div class="pictrue">
        <img src="../assets/images/noGoods.png" />
      </div>
      <div class="name">{{ $t("page.goodsList.empty") }}</div>
    </div>
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import categoryList from "@/components/categoryList";
export default {
  name: "goods_cate",
  auth: false,
  components: {
    categoryList
  },
  data() {
    return {
      swiperOption: {
        observer: true,
        slidesPerView: "auto",
        observeParents: true
      },

      categoryList: [],
      categoryCurrent: [],
      current: 0,
      moreCurrent: 0,
      seen: false,
      titleName: "",
      erCurrent: 0,
      iSdefaults: 0,
      storelist: [],
      pullRefreshss: true, // 代表可以进行下拉加载，false代表不能
      page: 1, //代表页面的初始页数
      limit: 12,
      scollY: null, // 离底部距离有多少
      total: 0, //总页数
      title: this.$t("page.index.Dropdowntoloadmore"),
      cid: 0, //一级分类
      sid: 0, //二级分类
      priceOrder: "",
      news: 0,
      merchant_category_id: "",
      storeCategoryList: [
        {
          category_name: this.$t("page.users.goodsCommentList.all"),
          category_name_en: this.$t("page.users.goodsCommentList.all"),
          category_name_th: this.$t("page.users.goodsCommentList.all"),
          merchant_category_id: ""
        }
      ],
      slideOn: 0
    };
  },
  fetch({ store }) {
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  head() {
    return {
      title: this.$t("page.index.Categories") + "-" + this.$store.state.titleCon
    };
  },
  beforeMount() {
    this.getStoreCategroy();
    this.getStorelist("");
  },
  mounted() {
    // this.pullRefresh();
  },
  beforeDestroy() {
    window.onscroll = null;
  },
  methods: {
    goDetails: function (item) {
      console.log('item',item)
      this.$router.push({
        path: '/store/',
        query: { id: item.mer_id }
      });
    },
    activeClick(item, index) {
      this.merchant_category_id = item.merchant_category_id;
      this.slideOn = index;
      this.getStorelist(1);
    },
    goDetail: function(item) {
      if (item.product_type == 1) {
        this.$router.push({
          path: "/goods_seckill_detail/" + item.product_id,
          query: { time: item.stop_time, status: item.seckill_status }
        });
      } else {
        this.$router.push({ path: "/goods_detail/" + item.product_id });
      }
    },
    getStoreCategroy() {
      let _this = this;
      _this.$axios
        .get("api/pc/mer_category")
        .then(function(res) {
          console.log(res);

          _this.storeCategoryList = _this.storeCategoryList.concat(res.data);
        })
        .catch(function(err) {
          _this.$message.error(err);
        });
    },
    getStorelist(num) {
      let _this = this;
      _this.page = num ? num : _this.page;
      let currentPage = {
        page: _this.page,
        limit: _this.limit,
        category_id: _this.merchant_category_id
      };
      _this.$axios
        .get("/api/store/merchant/lst", {
          params: currentPage
        })
        .then(function(res) {
          console.log('推荐店铺',res)
          _this.total = res.data.count;
          _this.storelist = res.data.list;
        })
        .catch(function(err) {
          _this.$message.error(err);
        });
    },
    // 分页点击
    bindPageCur(data) {
      this.page = data;
      this.getStorelist("");
    },
    enter() {
      this.current = -1;
      this.seen = true;
    },
    leave() {
      this.seen = false;
      this.current = this.moreCurrent;
    }
  }
};
</script>

<style scoped lang="scss">
.goods_cate {
  .noGoods {
    text-align: center;
    .pictrue {
      width: 274px;
      height: 174px;
      margin: 130px auto 0 auto;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .name {
      font-size: 14px;
      color: #969696;
      margin-top: 20px;
      margin-bottom: 290px;
    }
  }

  .title {
    color: #999999;
    height: 46px;
    line-height: 46px;
    .home {
      color: #282828;
    }
  }
  .shop_street_banner {
    background-color: #fff;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    // width: 100%;
    // height: 44px;
    // background-image: url("../assets/images/shop_banner.png");
    // background-size: 100%;
    // position: relative;

    .categoryList {
      width: 1200px;
      padding-top: 10px;
      padding-bottom: 15px;
      margin: 0 auto;
      /deep/.swiper-wrapper {
        flex-wrap: wrap;
      }
      /deep/ .el-tabs__item,
      .swiper-slide {
        width: auto;
        height: 26px;
        padding: 0 12px;
        border: 1px solid #e4e4e4;
        font-size: 14px;
        line-height: 26px;
        color: #666;
        border-radius: 13px;
        margin-right: 15px;
        cursor: pointer;
        margin-top: 15px;
      }
      .swiper-slide.on {
        border-color: #e93323;
        background-color: #e93323;
        color: #fff;
      }
    }
  }
  .store {
    margin-top: 40px;
    .item {
      width: 590px;
      margin-right: 20px;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      margin-bottom: 30px;
      &:nth-child(2n) {
        margin-right: 0;
      }
      .store_main {
        &.street-bg1 {
          background-image: url("../assets/images/street-bg1.jpg");
        }
        &.street-bg2 {
          background-image: url("../assets/images/street-bg2.jpg");
        }
        &.street-bg3 {
          background-image: url("../assets/images/street-bg3.jpg");
        }
        &.street-bg4 {
          background-image: url("../assets/images/street-bg4.jpg");
        }
        &.street-bg5 {
          background-image: url("../assets/images/street-bg5.jpg");
        }
        width: 180px;
        height: 224px;
        background-size: cover;
        text-align: center;
        color: #fff;
        background-image: url("../assets/images/street-bg0.jpg");
        .store_logo {
          display: inline-block;
          margin-top: 35px;
          width: 61px;
          height: 61px;
          border-radius: 100%;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .store_name {
          margin: 10px 0;
          font-weight: bold;
          .trader {
            display: inline-block;
            font-family: "PingFang SC";
            font-size: 12px;
            width: 32px;
            height: 18px;
            line-height: 18px;
            background-color: #e93323;
            font-weight: normal;
            border-radius: 2px;
          }
        }
        .follow {
          opacity: 0.7;
          margin-bottom: 12px;
        }
        .goStore {
          display: inline-block;
          font-size: 12px;
          line-height: 24px;
          border: 1px solid #fff;
          padding: 0 9px;
          color: #fff;
          border-radius: 2px;
        }
      }
      .store_product {
        width: 410px;
        height: 224px;
        padding: 0 17px;
        background: #fff;
        text-align: center;
        cursor: pointer;
        .no-recommend {
          margin: 0 auto;
        }
        .proList {
          width: 112px;
          float: left;
          margin-right: 20px;
          &:nth-child(3n) {
            margin-right: 0;
          }
          .image {
            width: 112px;
            height: 112px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .name {
            margin-top: 7px;
            color: #5a5a5a;
            line-height: 16px;
          }
          .price {
            color: #e93323;
            font-weight: bold;
            margin-top: 4px;
            span {
              font-size: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
